<template>
  <div class="mod-user">
    <el-form :inline="true" :model="formData">
      <el-form-item label="IC卡/手机号">
        <el-input
          v-model="formData.code"
          size="small"
          placeholder="IC卡号"
        ></el-input>
      </el-form-item>
      <el-form-item label="充值金额">
        <template>
          <div class="remain">
            <el-input
              v-model="formData.startPrice"
              size="small"
              placeholder="最小"
              @blur="searchChange"
            ></el-input>
            <span style="display: inline-block; padding: 0px 8px">至</span>
            <el-input
              v-model="formData.maxPrice"
              size="small"
              placeholder="最大"
              @blur="searchChange"
            ></el-input>
          </div>
        </template>
      </el-form-item>
      <el-form-item label="充值归属">
        <el-select
          size="small"
          v-model="formData.splitType"
          @change="searchChange"
        >
          <el-option
            v-for="(item, index) in splitTypeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="充值来源">
        <el-select
          size="small"
          v-model="formData.source"
          @change="searchChange"
        >
          <el-option value="0" label="手机充值"></el-option>
          <el-option value="1" label="IC卡充值"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="充值日期">
        <el-date-picker
          v-model="formData.createDate"
          @blur="searchChange"
          size="small"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.stop="searchChange">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="sumary-list">
      <div>用户数量: {{userCount}}</div>
      <div>IC卡数量: {{cardCount}}</div>
      <div>充值本金金额: {{totalPrice}}</div>
      <div>充值赠送金额: {{totalGivePrice}}</div>
    </div>
    <avue-crud
      ref="crud"
      :page="page"
      :data="dataList"
      :option="tableOption"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
      <template slot="cardNo" slot-scope="scope">
        <div>
          <p>手机号码：{{scope.row.mobile}}</p>
          <p>用户所属运营商：{{scope.row.merchantName}}</p>
        </div>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { tableOption3 } from "@/crud/app-user/user";
export default {
  data() {
    return {
      merchantList: [],
      formData: {
        code: "",
        createDate: "",
        source: "",
        rechargeStartTime: "",
        splitType: "",
        rechargeEndTime: "",
        maxPrice: "",
        startPrice: "",
      },
      tableOption: tableOption3,
      dataList: [],
      splitTypeList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "普通账户",
          value: "0",
        },
        {
          label: "分账账户",
          value: "1",
        }
      ],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      userCount:'0',
      cardCount:'0',
      totalPrice:'0',
      totalGivePrice:'0'
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList(page, params) {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/v1/merchant/recharge/page"),
        method: "get",
        params: this.$http.adornParams(
          Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize,
            },
            params
          )
        ),
      }).then(({ data }) => {
        console.log(data)
        this.dataList = data.data.payOrderIPage.records;
        this.page.total = data.data.payOrderIPage.total;
        this.userCount = data.data.userCount;
        this.totalPrice = data.data.totalPrice;
        this.totalGivePrice = data.data.totalGivePrice;
        this.cardCount = data.data.cardCount;
        this.dataListLoading = false;
      });
    },
    // 删除
    deleteHandle (id) {
      this.$confirm(`确定进行注销操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/admin/api/v1/admin/card/cancel'),
            method: 'POST',
            data: this.$http.adornData({
              id:id
            })
          }).then(({ data }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList(this.page)
              }
            })
          })
        })
        .catch(() => { })
    },
    searchChange() {
      if (this.formData.createDate && this.formData.createDate.length > 0) {
        this.formData.rechargeStartTime = this.formData.createDate[0];
        this.formData.rechargeEndTime = this.formData.createDate[1];
      } else {
        this.formData.rechargeStartTime = "";
        this.formData.rechargeEndTime = "";
      }
      this.page.currentPage = 1;
      this.getDataList(this.page, this.formData);
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.getDataList(this.page, this.formData);
    },
    currentChange(val) {
      this.page.currentPage = val;
      this.getDataList(this.page, this.formData);
    },
  },
};
</script>

<style lang="scss" scoped>
.remain {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .el-input {
    width: 100px;
  }
}
.sumary-list {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 15px;
  div {
    height: 30px;
    padding: 0px 12px;
    line-height: 30px;
    border: solid 1px #009ff1;
    border-radius: 15px;
    margin-right: 10px;
  }
  div:hover {
    color: white;
    background-color: #009ff1;
  }
}
</style>


